<template>
  <div>

    <div id="app" style="width: 50%;margin: auto;">
      <el-card shadow="always" style="text-align: center">
        <p style="font-size: 20px;font-weight:bold"><i class="el-icon-edit"/> 签署合同</p>
      </el-card>
    </div>

    <div class="placeholder"/>

    <el-card class="box-card" style="width: 50%;margin: auto;">

      <h1 style="text-align: center;font-weight: 550;color: #188DC3">
        雇佣劳动合同
      </h1>

      <div class="placeholder"/>

      <div class="itemDiv">
        <div>
          <span> 甲方：</span>
          <label>
            <input type="text" v-model="data.sendTaskUserName" disabled>
          </label>
        </div>

        <div style="margin-top: 10px">
          <span> 乙方：</span>
          <label>
            <input type="text" v-model="data.receiveTaskUserName" disabled>
          </label>
        </div>
      </div>

      <div class="placeholder"/>

      <div class="itemDiv">
        <p>
          鉴于甲方业务发展的需要，雇佣乙方为《
          <label>
            <input type="text" v-model="data.mandateTitle" disabled>
          </label>
          》提供劳务服务，经双方协商订立正式《劳务雇佣合同书》
        </p>
        <p>如下:</p>
      </div>

      <div class="placeholder"/>

      <div class="itemDiv">
        <p style="font-size: 22px">一、合同期限</p>
        <p> 第一条 、 本合同于
          <label>
            <input type="text" style="width: 80px" v-model="data.year" disabled>
          </label>
          <span> 年 </span>
          <label>
            <input type="text" style="width: 60px" v-model="data.month" disabled>
          </label>
          <span> 月 </span>
          <label>
            <input type="text" style="width: 60px" v-model="data.day" disabled>
          </label>
          <span> 日 </span>
          生效，期限
          <label>
            <input type="text" style="width: 60px" v-model="data.workCycle" disabled>
          </label>
          <span> 日 </span>
          <span>。如双方需要要，可在合同期满前-一个月协商续签劳务雇佣合同。如合同期己满，双方不再续签合同，但受雇方从事的有关工作和业务尚未结束，则合同应顺延至有关工作业务结束，也可双方约定为寻至岗位接替者止，约定期限为-一个月。</span>
        </p>
      </div>

      <div class="placeholder"/>

      <div class="itemDiv">
        <p style="font-size: 22px">二、甲、乙双方的义务和责任</p>
        <p> 第二条、 乙方同意根据甲方工作需要，承担
          <label>
            <input type="text" style="width: 100px" v-model="data.talentCategory" disabled>
          </label>
          岗位(工种)工作。
        </p>

        <p>第三条、 乙方工作应达到甲方规定该岗位职责的要求和甲方对该岗位之特别规定(详见《岗位责任书》)的标准。</p>

        <p>第四条、 乙方应按照工作职责保证完成甲方规定的工作和任务。</p>

        <p>第五条、 乙方应接受甲方的绩效考核。</p>

        <p>第六条、 未经甲方许可，乙方不得承接与乙方职责相关的个人业务。</p>

        <p>第七条、 甲方应向乙方提供乙方所承担工作中必需的工作条件。</p>

        <p>第八条、 乙方应严格遵守本合同的附加条款。</p>

      </div>

      <div class="placeholder"/>

      <div class="itemDiv">
        <p style="font-size: 22px">三、劳务报酬</p>
        <p>第九条、 甲方在乙方完成任务后以货币形式支付乙方劳务报酬，为：
          <label>
            <input type="text" style="width: 80px" v-model="data.salary" disabled>
          </label>
          元/日。
        </p>
        <p>乙方在试用期间的劳务报酬为：
          <label>
            <input type="text" style="width: 60px" v-model="data.salary" disabled>
          </label>
          元 X
          <label>
            <input type="text" style="width: 60px" v-model="data.workCycle" disabled>
          </label>
          日。
        </p>
        <p>甲乙双方对劳务报酬的其他约定：
          <label>
            <input type="text" style="width: 150px" placeholder="无" disabled>
          </label>
          。
        </p>
        <p>甲方在以下情况有权扣除乙方相应额度的劳务报酬：</p>
        <p>1、因乙方的过失给甲方造成经济损失的; 2、乙方违反相关管理制度的; 3、双方约定的其他情况。</p>
      </div>

      <div class="placeholder"/>

      <div class="itemDiv">
        <p style="font-size: 22px">四、合同的终止与解除</p>
        <p>第十条、 合同期满如未续签，则视为《劳务雇佣合同书》自行终止，双方应及时办理相关手续。</p>
        <p>第十一条、 经甲乙双方协商- -致，本合同可以解除。</p>
        <p>第十二条、 乙方有下列情形之一，甲方可以解除本合同：</p>
        <p>(一)在试用期间被证明不符合录用条件的。</p>
        <p>(二)严重违反甲方有关规定及按照本合同约定可以解除劳务合同的。</p>
        <p>(三)严重失职，营私舞弊，对甲方利益造成重大损害的。</p>
        <p>(四)被依法追究刑事责任的。</p>
      </div>

      <div class="placeholder"/>

      <div style="width:80%;margin: auto">
        <p>甲方签字：</p>

        <div v-show="data.sendTaskUserId!==$store.state.userId">
          <div v-if="data.partyAImageUrl!==null">
            <img :src="data.partyAImageUrl" alt="图片加载失败">
          </div>
          <div v-else>
            <p>用户还未签字</p>
          </div>
        </div>

        <div v-show="data.sendTaskUserId===$store.state.userId">
          <div v-show="data.partyAImageUrl!==null">
            <img :src="data.partyAImageUrl" alt="图片加载失败">
          </div>
          <div v-show="data.partyAImageUrl===null">
            <div id="signatureA" style="width:600px;height:210px;"/>
            <el-button @click="saveSignatureA">保存签名</el-button>
            <el-button @click="clearSignatureA">重置签名</el-button>
          </div>
        </div>


      </div>

      <div class="placeholder"/>

      <div style="width:80%;margin: auto">
        <p>乙方签字：</p>

        <div v-show="data.receiveTaskUserId!==$store.state.userId">
          <div v-if="data.partyBImageUrl!==null">
            <img :src="data.partyBImageUrl" alt="图片加载失败">
          </div>
          <div v-else>
            <p>用户还未签字</p>
          </div>
        </div>

        <div v-show="data.receiveTaskUserId===$store.state.userId">
          <div v-show="data.partyBImageUrl!==null">
            <img :src="data.partyBImageUrl" alt="图片加载失败">
          </div>
          <div v-show="data.partyBImageUrl===null">
            <div id="signatureB" style="width:600px;height:210px;"/>
            <el-button @click="saveSignatureB">保存签名</el-button>
            <el-button @click="clearSignatureB">重置签名</el-button>
          </div>
        </div>

      </div>

    </el-card>

  </div>
</template>

<script>
import $ from 'jquery';
import 'jq-signature'

export default {
  name: "contract",
  data() {
    return {
      bossId: 0,
      empId: 0,
      taskId: 0,
      data: {
        year: '',
        month: '',
        day: '',
      },
    }
  },
  mounted() {

    typeof this.$route.query.empId !== 'undefined' ? this.empId = this.$route.query.empId : this.empId = this.$store.state.userId
    typeof this.$route.query.bossId !== 'undefined' ? this.bossId = this.$route.query.bossId : this.bossId = this.$store.state.userId
    this.taskId = this.$route.query.taskId

    this.initContract()

    $('#signatureA').jqSignature({
      width: '300',
      height: '200',
      border: '1px solid #ff6700',
      background: '#ddd',
      lineColor: "#0A4D82",
      lineWidth: 3,
      autoFit: true
    })

    $('#signatureB').jqSignature({
      width: '300',
      height: '200',
      border: '1px solid #ff6700',
      background: '#ddd',
      lineColor: "#0A4D82",
      lineWidth: 3,
      autoFit: true
    })

  },
  methods: {

    async initContract() {
      const {data: res} = await this.$http.get('/task/contract/' + this.taskId + '/' + this.empId + '/' + this.bossId)
      this.data = res.content
      this.getNowTime()
      console.log(res)

    },

    getNowTime() {
      let date = new Date();
      this.data.year = date.getFullYear();//得到当前年份
      this.data.month = date.getMonth() + 1;//得到当前月份
      this.data.day = date.getDate();//得到当前几号
    },

    clearSignatureA() {
      $('#signatureA').jqSignature('clearCanvas')
    },
    clearSignatureB() {
      $('#signatureB').jqSignature('clearCanvas')
    },
    saveSignatureA() {
      let signatureBox = $('#signatureA');
      let canvas = signatureBox.children('canvas').eq(0)[0]
      let data = signatureBox.jqSignature('getDataURL');
      const blankCanvas = document.createElement('canvas');
      blankCanvas.width = canvas.width;
      blankCanvas.height = canvas.height;
      if (blankCanvas.toDataURL() === canvas.toDataURL()) {
        alert('请签名')
      }
      this.pushAImg(data)
    },

    async pushAImg(data) {
      const {data: res} = await this.$http.post('/task/contract', {
        partyAId: this.bossId,
        partyBId: this.empId,
        taskId: this.taskId,
        partyImage: data
      })
      console.log(res)
      await this.initContract()
    },


    saveSignatureB() {
      let signatureBox = $('#signatureB');
      let canvas = signatureBox.children('canvas').eq(0)[0]
      let data = signatureBox.jqSignature('getDataURL');
      const blankCanvas = document.createElement('canvas');
      blankCanvas.width = canvas.width;
      blankCanvas.height = canvas.height;
      if (blankCanvas.toDataURL() === canvas.toDataURL()) {
        alert('请签名')
      }
      this.pushBImg(data)
    },

    async pushBImg(data) {
      const {data: res} = await this.$http.post('/task/contractImg', {
        partyAId: this.bossId,
        partyBId: this.empId,
        taskId: this.taskId,
        partyImage: data
      })
      console.log(res)
      await this.initContract()
    },

  }
}
</script>

<style scoped>

input {
  width: 180px;
  border: none;
  border-bottom: 1px solid black;
}

.placeholder {
  height: 20px;
}

.itemDiv {
  width: 70%;
  margin: auto;
  font-size: 16px;
}

</style>